<template>
  <div class="defaultBackground container fixed myRecord">
    <Header content="资产记录"></Header>
    <div class="grayColor" style="background: #414351;padding-top: 8px;position: relative;">
      <flexbox style="padding-bottom: 8px;">
        <flexbox-item v-for="item,index in tabArr" :key="index" class="font14">
          <div class="flex-demo" :class="{light:item.index == 0}" @click="seleTab(index)">
            <span>{{item.tab}}</span>
            <img src="../../assets/img/arrDown.png" alt="" v-if="item.index == -1" class="myRecordImg">
            <img src="../../assets/img/arrUpLight.png" alt="" v-if="item.index == 0" class="myRecordImg">
          </div>
        </flexbox-item>
      </flexbox>
      <div class="slide" :class="showContent['showContent'+ currentIndex]?'animate':''">
        <div v-for="item,index in tabArr[currentIndex].list" class="center myRecordList font13" :class="{light:index == tabArr[currentIndex].currentDownListTab}" @click="sele(index,item)">
            {{item.name}}
        </div>
        <flexbox v-if="currentIndex == 0" :gutter="0" class="font14">
          <flexbox-item class="flexStyle timePicker" :span="38/100">
            <div>
              <datetime
                :title="dataStartTitle"
                v-model="dateStart"
                :min-year="2016"
                format="YYYY-MM-DD HH:mm"
                @on-confirm="confirm('Start')"
              ></datetime>
            </div>
          </flexbox-item>
          <flexbox-item class="flexStyle whiteColor timePicker" :span="38/100">
            <div>
              <datetime
                :title="dataEndTitle"
                v-model="dateEnd"
                format="YYYY-MM-DD HH:mm"
                @on-confirm="confirm('End')"
              ></datetime>
            </div>
          </flexbox-item>
          <flexbox-item class="flexStyle timePickerCon font14" style="width: 40px;" :span="24/100">
            <div :class="{'defaultColor':tabArr[currentIndex].currentDownListTab == 5}" @click="sele(5)">确定</div>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
    <div class='mask' :class="showMask?'maskHide':''" @click="maskClick"></div>
    <div style="margin-left: 4%;height: 64px;" class="whiteColor">
      <scroller
        :pulldown-config="{content: '下拉刷新',downContent: '下拉刷新',upContent: '释放刷新'}"
        :pullup-config="{content: '上拉加载',downContent: '松开加载',upContent: '上拉加载'}"
        lock-x
        height="-85"
        ref="scrollerBottom"
        @on-pullup-loading="onScrollBottom()"
        :use-pullup="true"
        :use-pulldown="true"
        @on-pulldown-loading="onScrollTop()"
      >
        <div>
          <flexbox style="border-bottom: 1px solid #21222A;padding: 10px 0;box-sizing: border-box;" v-for="(item,index) in recordList" :key="index" v-if="recordList.length>0">
            <flexbox-item>
              <div :class="{'red':item.type  == '2','green':item.type =='1'}" class="font16">{{item.type == '1'?'+':'-'}}{{item.amount}} {{item.currency_id | findName}}</div>
            </flexbox-item>
            <flexbox-item>
              <flexbox orient="vertical" :gutter="0">
                <flexbox-item><div class="myRecordFlex font13">{{item.type | type}}{{item.status | status}}</div></flexbox-item>
                <flexbox-item><div class="myRecordFlex font12">{{item.timeline | timestamp}}</div></flexbox-item>
              </flexbox>
            </flexbox-item>
          </flexbox>
          <div v-if="recordList.length==0" style="height:300px;line-height:300px;text-align: center;">
            暂无数据
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
  import Header from '../common/header.vue'
  import { Group,Flexbox, FlexboxItem,Cell,Scroller,PopupPicker,Datetime } from 'vux'
  export default{
    data(){
      return {
        showContent:{
          showContent0:false,
          showContent1:false,
          showContent2:false,
        },
        dataStartTitle:'    开始时间    ',
        dataEndTitle:'    结束时间    ',
        showMask:false,
        tabArr:[
          {tab:'时间',index:-1,currentDownListTab:0,list:[
            {name:'全部',id:0,},
            {name:'当天',id:1},
            {name:'一周内',id:7},
            {name:'一个月内',id:30}
            ]},
          {tab:'币种',index:-1,currentDownListTab:0,list:[
            {name:'全部',id:0},
            {name:'BTC',id:1},
            {name:'ETH',id:2}
            ]},
          {tab:'类型',index:-1,currentDownListTab:0,list:[
            {name:'全部',id:0},
            {name:'充值',id:1},
            {name:'提现',id:2},
            {name:'审核中',id:3}
            ]}],
        currentIndex:0,
        onFetching:false,
        onFetching1:false,
        recordList:[],
        dateEnd:'',
        dateStart:'',
        page:{
          currency_id:'',
          dateStart:'',
          dateEnd:'',
          recordType:'',
          page:1,
          pagesize:15,
          total:0,
        }
      }
    },
    methods:{
      onScrollTop(){
        if (this.onFetching1) {
        } else {
          this.onFetching1 = true;
          this.page.page = 1;
          this.recordList = [];
          this.bills('pullDown');
        }
      },
      onScrollBottom () {
        if (this.onFetching) {} else {
          this.onFetching = true;
          var that = this;
          that.page.page ++;
          this.bills('pullUp');
        }
      },
      bills(type){
        this.loading(true);
        this.service('bills',{
          page:this.page.page,
          pagesize:this.page.pagesize,
          currency_id:this.page.currency_id,
          startTime:this.page.dateStart,
          endTime:this.page.dateEnd,
          recordType:this.page.recordType,
        }).then((res)=>{
          this.loading(false);
          this.recordList =  this.recordList.concat(res.data);
          this.page.total = res.meta.pagination.total_pages;
          this.$nextTick(() => {
            if(this.page.total == 0 || (this.page.total == this.page.page)){
              this.$refs.scrollerBottom.disablePullup();
              this.$refs.scrollerBottom.reset({top:0});
            }else{
              if(type === 'pullDown'){
                this.$refs.scrollerBottom.reset({top:0});
              }
              this.$refs.scrollerBottom.donePulldown();
              this.$refs.scrollerBottom.enablePullup();
            }
          })
          this.onFetching = false;
          this.onFetching1 = false;
        })
      },
      seleTab(index){
        for(var i = 0;i<3;i++){
          if(index != this.currentIndex){
            this.showContent['showContent'+i] = false;
            this.$set(this.tabArr[i],'index',-1)
          }
        }
        this.showContent['showContent'+index] = !this.showContent['showContent'+index];
        this.$set(this.tabArr[index],'index',this.tabArr[index].index = this.tabArr[index].index == -1?0:-1);
        if(this.showContent['showContent'+index] === false){
          this.showMask = false;
        }else{
          this.showMask = true;
        }
        this.currentIndex = index;
      },
      sele(index,item){
        this.tabArr[this.currentIndex].currentDownListTab = index;
        this.showContent['showContent'+this.currentIndex] = false;
        if(this.currentIndex == 0){
          if(item){
            if(item.id === 0){
              this.page.dateEnd = '';
              this.page.dateStart = '';
            }else{
              let dateRange = this.calcTime(item.id);
              console.log(dateRange)
              this.page.dateStart = dateRange.dateStart;
              this.page.dateEnd = dateRange.dateEnd;
            }
          }
        }else if(this.currentIndex == 1){//币种
          if(index == 0){
            this.page.currency_id = '';
          }else{
            this.page.currency_id = index;
          }
        }else if(this.currentIndex == 2){//类型
          this.page.recordType = item.id;
        }
        this.$set(this.tabArr[this.currentIndex],'index',-1);
        this.showMask = false;
        this.onScrollTop();
      },
      maskClick(){
        this.showMask = !this.showMask;
        this.showContent['showContent'+this.currentIndex] = false;
        this.$set(this.tabArr[this.currentIndex],'index',-1);
      },
      confirm(type){
        this['data'+type+'Title'] = this['date'+type];
        this.page.dateStart = this.dateStart?Date.parse(this.dateStart) / 1000:'';
        this.page.dateEnd = this.dateEnd?Date.parse(this.dateEnd) / 1000:'';
      }
    },
    created(){
      this.onScrollTop();
    },
    components:{
      Header,
      Group,
      Flexbox,
      FlexboxItem,
      Cell,
      Scroller,
      PopupPicker,
      Datetime,
    }
  }
</script>
<style>
  .myRecord .flex-demo{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .myRecord .flex-demo>span{
    margin-right: 10px;
  }
  .light{
    color:#F1BC37;
  }
  .myRecordImg{
    width:15px;
  }
  .flexStyle{
    text-align: center;
    line-height: 43px;
    height: 43px;
  }
  .flexStyle .weui-cell{
    padding:0!important;
  }
  .flexStyle .weui-cell__ft.vux-cell-primary.vux-datetime-value{
    width: 131px;
    margin:0 auto;
  }
  .timePicker .vux-cell-value{
    color: #fff;
  }
  .timePicker .weui-cell_access .weui-cell__ft:after{
    display: none;
  }
  .timePicker .weui-cell{
    display: block;
  }
  .myRecord .slide {
    padding: 0 0px 0 20px;
    overflow: hidden;
    max-height: 0;
    position: absolute;
    top: 36px;
    width: 100%;
    background: #414351;
    z-index: 999;
    transition: max-height .5s cubic-bezier(0, 1, 0, 1) -.2s;
  }
  .myRecord .animate {
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
  }
  .myRecordList{
    line-height: 43px;
    height: 43px;
    border-bottom: 1px solid #21222A;
  }
  .mask{
    position: absolute;
    height:0;
    bottom: 0;
    background: #000000;
    width:100%;
    opacity: 0;
    transition: opacity .5s;
    /*transition: height .1s .5s;*/
    z-index: 3;
  }
  .maskHide{
    opacity: 0.5;
    height:  calc(100% - 85px);
  }
  .flexStyle .vux-datetime{
    color:#FFFFFF;
  }
  .flexStyle .weui-cell_access{
    background: unset;
  }
  .myRecordFlex{
    text-align: right;
    padding-right:10px;
  }
  .green{
    color: #32C089;
  }
  .red{
    color: #F54445;
  }
</style>
